<template>
  <div v-show="dialogValue" class="add-page f-c">
    <BackPage title="掌上中介添加、详情" show-back @back="onClose" />
    <div class="add-form-box f-g">
      <el-form ref="formRef" :disabled="formDisabled" :model="ruleForm" :rules="rules" label-position="top" class="user-add-form" inline>
        <el-form-item label="单位名称" prop="corporateName">
          <el-input clearable v-model="ruleForm.corporateName" />
        </el-form-item>
        <el-form-item label="统一社会信用代码" prop="creditCode">
          <el-input clearable v-model="ruleForm.creditCode" />
        </el-form-item>
        <el-form-item label="单位性质" prop="unitType">
          <el-input clearable v-model="ruleForm.unitType" />
        </el-form-item>
        <el-form-item label="注册地址" prop="registeredAddress">
          <el-input clearable v-model="ruleForm.registeredAddress" />
        </el-form-item>
        <el-form-item label="注册资本">
          <el-row>
            <el-col :span="9">
              <el-input clearable v-model="ruleForm.registeredCapital" />
            </el-col>
            <el-col :span="6">
              <div style="text-align: center">万元</div>
            </el-col>
            <el-col :span="9">
              <el-select clearable v-model="ruleForm.currency">
                <el-option value="RMB" label="人民币" />
                <el-option value="USD" label="美元" />
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="所在行政区域">
          <el-input clearable v-model="ruleForm.region" />
        </el-form-item>
        <el-form-item label="转(改)制单位">
          <el-select clearable v-model="ruleForm.isChange">
            <el-option v-for="item in options1" :key="item.value" :value="item.value" :label="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="转(改)制企业是否与原单位脱钩">
          <el-select clearable v-model="ruleForm.isDivorce">
            <el-option v-for="item in options1" :key="item.value" :value="item.value" :label="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="原单位名称">
          <el-input clearable v-model="ruleForm.originalCompany" />
        </el-form-item>
        <el-form-item />
        <el-form-item label="法定代表人姓名">
          <el-input clearable v-model="ruleForm.legalName" />
        </el-form-item>
        <el-form-item label="法定代表人手机">
          <el-input clearable v-model="ruleForm.legalPhone" />
        </el-form-item>
        <el-form-item label="法定代表人固定电话">
          <el-input clearable v-model="ruleForm.legalTelephone" />
        </el-form-item>
        <el-form-item label="法定代表人传真">
          <el-input clearable v-model="ruleForm.legalFax" />
        </el-form-item>
        <el-form-item label="联系人姓名">
          <el-input clearable v-model="ruleForm.contactsName" />
        </el-form-item>
        <el-form-item label="联系人手机号码">
          <el-input clearable v-model="ruleForm.contactsPhone" />
        </el-form-item>
        <el-form-item label="联系人固定电话">
          <el-input clearable v-model="ruleForm.contactsTelephone" />
        </el-form-item>
        <el-form-item label="联系人传真号码">
          <el-input clearable v-model="ruleForm.legalFax" />
        </el-form-item>
        <el-form-item label="办公地址">
          <el-input clearable v-model="ruleForm.officeLocation" />
        </el-form-item>
        <el-form-item label="邮政编码">
          <el-input clearable v-model="ruleForm.postalCode" />
        </el-form-item>
        <el-form-item label="联系QQ">
          <el-input clearable v-model="ruleForm.qq" />
        </el-form-item>
        <el-form-item label="微信号">
          <el-input clearable v-model="ruleForm.wechat" />
        </el-form-item>
        <el-form-item label="公司网址">
          <el-input clearable v-model="ruleForm.website" />
        </el-form-item>
        <el-form-item label="电子邮箱">
          <el-input clearable v-model="ruleForm.email" />
        </el-form-item>
        <el-form-item label="经营范围" style="width: 100%">
          <el-input clearable v-model="ruleForm.manageRange" type="textarea" style="width: 100%" />
        </el-form-item>
        <el-form-item v-if="!formDisabled">
          <el-button type="primary" @click="onSave">保存</el-button>
          <el-button @click="onClose">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { http_intermediary_info } from '@/api'

export default {
  name: 'User1Add',
  data() {
    return {
      dialogValue: false,
      ruleForm: {
        id: undefined,
        corporateName: '',
        creditCode: '',
        unitType: '',
        registeredAddress: '',
        registeredCapital: '',
        currency: '',
        region: '',
        isChange: 0,
        isDivorce: 0,
        originalCompany: '',
        legalName: '',
        legalTelephone: '',
        legalPhone: '',
        legalFax: '',
        contactsName: '',
        contactsTelephone: '',
        contactsPhone: '',
        officeLocation: '',
        qq: '',
        wechat: '',
        website: '',
        email: '',
        manageRange: ''
      },
      rules: {
          corporateName: [{ required: true, message: '不能为空' }],
          creditCode: [{ required: true, message: '不能为空' }],
          unitType: [{ required: true, message: '不能为空' }],
          registeredAddress: [{ required: true, message: '不能为空' }],
      },
      options1: [
        { value: 0, name: '是' },
        { value: 1, name: '否' }
      ],
      formDisabled: false
    }
  },
  methods: {
    read(item) {
      for (const key in this.ruleForm) {
        this.ruleForm[key] = item[key]
      }
      this.formDisabled = true
      this.dialogValue = true
    },
    open(item) {
      this.formDisabled = false
      if (item) {
        for (const key in this.ruleForm) {
          this.ruleForm[key] = item[key]
        }
      } else {
        this.ruleForm = {
          id: undefined,
          corporateName: '',
          creditCode: '',
          unitType: '',
          registeredAddress: '',
          registeredCapital: '',
          currency: '',
          region: '',
          isChange: 0,
          isDivorce: 0,
          originalCompany: '',
          legalName: '',
          legalTelephone: '',
          legalPhone: '',
          legalFax: '',
          contactsName: '',
          contactsTelephone: '',
          contactsPhone: '',
          officeLocation: '',
          qq: '',
          wechat: '',
          website: '',
          email: '',
          manageRange: ''
        }
      }
      this.dialogValue = true
    },
    onSave() {
        this.$refs.formRef.validate(valid => {
            if (valid) {
                http_intermediary_info.create({
                    ...this.ruleForm
                }).then(res => {
                    this.$message.success(res.msg)
                    this.onClose()
                })
            }
        })
      
    },
    onClose() {
      this.dialogValue = false
      this.$emit('get-page')
    }
  }
}
</script>

<style scoped lang="scss">
.add-page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  background-color: #F6F6F6;
}
.add-form-box {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid rgba(185, 185, 185, .3);
  border-radius: 16px;
  padding: 60px;
  ::v-deep .el-form {
    .el-form-item {
      width: calc((100% - 64px) / 2);
      margin-right: 0;
    }
    .el-form-item:nth-child(odd) {
      margin-right: 64px;
    }
    .el-select {
      width: 100%;
    }
  }
}
</style>
